<template>
  <div class="mh-bg">
    <header class="mh-header">
      <h1 class="mh-title">
        <p>
          {{ titleName }}
          ---
          <span>所见即所得</span>
        </p>
        <!-- <p>
          所
          <b>见</b>
          即所
          <b>得</b>
          ，
          <b>开</b>
          啥
          <b>发</b>
          啥！
        </p> -->
      </h1>
    </header>
    <footer class="mh-footer">
      <div class="mh-footer-title">
        <h1 v-show="currentFlipedCardData.length !== 0">当前卡池</h1>
        <h1 v-show="currentFlipedCardData.length == 0">剩余卡片</h1>
        <div @click="cleanUp"
             v-show="currentFlipedCardData.length !== 0">清空</div>
      </div>
      <div class="mh-footer-box1"
           v-show="currentFlipedCardData.length !== 0">
        <div class="mh-footer-container">
          <div class="flipped-card"
               v-for="(flipedCardItem, index) in currentFlipedCardData"
               :key="flipedCardItem.id">
            <span> 卡牌{{ flipedCardItem?.dataIndex }} </span>
            <span style="color: #000; font-size: 0.32rem">{{ flipedCardItem?.prizeName }}</span>
            <span style="color: #edff00">{{ flipedCardItem?.phValue || 0 }}PH值 </span>
          </div>
        </div>
      </div>
      <div class="mh-footer-box1"
           v-show="currentFlipedCardData.length == 0">
        <div class="mh-footer-container">
          <div class="flipped-card"
               v-for="(flipedCardItem, index) in scrollList"
               :key="flipedCardItem.id">
            <span> {{ flipedCardItem?.levelName }} 级</span>
            <span style="color: #000; font-size: 0.32rem"> {{ flipedCardItem?.prizeName }} </span>
            <span style="color: #edff00">{{ flipedCardItem?.phValue }}PH值</span>
          </div>
        </div>
      </div>
      <div class="mh-footer-ph">
        <h1>
          合计【 <b>{{ currentFlipedCardData.length }}</b> 】张
        </h1>
        <h1>
          PH值【<b>{{ currentFlipedCardDataHP }}</b>】分
        </h1>
      </div>
    </footer>
    <article class="mh-article">
      <aside class="mh-article-left">
        <h1>配比介绍</h1>
        <h5>
          每场次配备300张,每场配1个SSS评级卡,HP值高达6000！
          此外还含有SS,S,A,B,C多等级卡牌！下单随机选拆!
        </h5>
        <div class="left-table">
          <div class="title">卡位出率</div>
          <ul>
            <li>
              <div>
                <p>SSS</p>

                <p>【1%】</p>
              </div>
            </li>
            <li>
              <div>
                <p>SS</p>
                <p>【2.5%】</p>
              </div>
              <div>
                <p>S</p>
                <p>【5%】</p>
              </div>
            </li>
            <li>
              <div>
                <p>A</p>
                <p>【20%】</p>
              </div>
              <div>
                <p>B</p>
                <p>【31.5%】</p>
              </div>
            </li>
            <li>
              <div>
                <p>C</p>
                <p>【40%】</p>
              </div>
              <div>
                <p>D</p>
                <p>无</p>
              </div>
            </li>
            <li>
              <div>
                <p>E</p>
                <p>无</p>
              </div>
              <div>
                <p>F</p>
                <p>无</p>
              </div>
            </li>
          </ul>
        </div>
      </aside>
      <div style="height: 100%; overflow: auto">
        <div class="mh-tap">
          <div class="btnBox">
            <button class="mh-tap-btn"
                    :style="{ backgroundColor: tapId === 1 ? '#0a6e10d6' : '' }"
                    @click="changeTap(1)">
              全部卡池 【 {{ cardData.length }} 】
            </button>
            <button class="mh-tap-btn"
                    :style="{ backgroundColor: tapId === 2 ? '#0a6e10d6' : '' }"
                    @click="changeTap(2)">
              已选卡池 【 {{ flipedCardData.length }} 】
            </button>
            <button class="mh-tap-btn"
                    :style="{ backgroundColor: tapId === 3 ? '#0a6e10d6' : '' }"
                    @click="changeTap(3)">
              剩余卡池 【 {{ remainingCardData.length }} 】
            </button>

            <button class="mh-tap-btn"
                    @click="resetPrizes()">重置奖池</button>
          </div>
        </div>
        <Simplebar class="center">
          <div class="card-container"
               v-show="tapId === 1">
            <div :class="['card', cardItem?.state ? 'isFlip' : '']"
                 @click="chooseCard(cardItem)"
                 v-for="(cardItem, index) in cardData"
                 :key="cardItem.id">
              卡牌{{ cardItem?.dataIndex }}
            </div>
          </div>
          <div class="card-container"
               v-show="tapId === 3">
            <div :class="['card', cardItem?.state ? 'isFlip' : '']"
                 @click="chooseCard(cardItem)"
                 v-for="(cardItem, index) in remainingCardData"
                 :key="cardItem.id">
              卡牌{{ cardItem?.dataIndex }}
            </div>
          </div>
          <div class="card-container"
               v-show="tapId === 2">
            <div :class="['card', cardItem?.state ? 'isFlip' : '']"
                 @click="chooseCard(cardItem)"
                 v-for="(cardItem, index) in flipedCardData"
                 :key="cardItem.id">
              卡牌{{ cardItem?.dataIndex }}
            </div>
          </div>
        </Simplebar>
      </div>
      <aside class="mh-article-right">
        <h1>器材安排</h1>
        <div>
          <table>
            <tbody>
              <tr>
                <th rowspan="4">SSS</th>
                <td>野豹G1</td>
                <td>6000PH</td>
              </tr>
              <tr>
                <td>野豹准4</td>
                <td>6000PH</td>
              </tr>
              <tr>
                <td>东方龙S</td>
                <td>6000PH</td>
              </tr>
              <tr>
                <td>南匠风华</td>
                <td>6000PH</td>
              </tr>

              <tr>
                <th rowspan="2">SS</th>
                <td>奥秘墨影球杆</td>
                <td>300PH</td>
              </tr>
              <tr>
                <td>超级梦皮头</td>
                <td>300PH</td>
              </tr>

              <tr>
                <th rowspan="3">S</th>
                <td>南匠三槽杆包</td>
                <td>150PH</td>
              </tr>
              <tr>
                <td>大头杆包</td>
                <td>150PH</td>
              </tr>
              <tr>
                <td>TP750巧克</td>
                <td>150PH</td>
              </tr>
              <!-- 分 -->
              <tr>
                <th rowspan="5">A</th>
                <td>TP巧克粉</td>
                <td>100PH</td>
              </tr>
              <tr>
                <td>HR巧克粉</td>
                <td>100PH</td>
              </tr>
              <tr>
                <td>梦皮头</td>
                <td>100PH</td>
              </tr>
              <tr>
                <td>大鲨鱼3.0T</td>
                <td>100PH</td>
              </tr>
              <tr>
                <td>职业冰丝手套</td>
                <td>100PH</td>
              </tr>
              <!-- 分 -->
              <tr>
                <th rowspan="2">B</th>
                <td>鹿皮绒擦杆布</td>
                <td>50PH</td>
              </tr>
              <tr>
                <td>强磁巧克夹</td>
                <td>50PH</td>
              </tr>
              <!-- 分 -->

              <tr>
                <th rowspan="3">C</th>
                <td>摆球纸</td>
                <td>10PH</td>
              </tr>
              <tr>
                <td>台球滑石粉</td>
                <td>10PH</td>
              </tr>
              <tr>
                <td>球杆保养油</td>
                <td>10PH</td>
              </tr>
            </tbody>
          </table>
        </div>
      </aside>
    </article>
    <div class="RealyFooter">
      未满
      <span>18</span>
      岁, 禁止下单,一经翻牌,不退不换!
    </div>
  </div>
  <!-- 遮罩 -->
  <div class="mask-box"
       v-if="cardName">
    <!-- 二次确认 -->
    <div class="mask-box-content"
         v-if="!isFlipCard">
      <h1>
        是否打开 <span class="card-number">{{ cardName }}号</span> 卡牌
      </h1>
      <div class="mask-box-content-btn">
        <span class="btn-confirm"
              @click="onConfirm">确认</span>
        &emsp;
        <span class="btn-cancel"
              @click="onCancel">取消</span>
      </div>
    </div>
    <!-- 翻牌 -->
    <div class="card-box"
         v-if="isFlipCard"
         @click.stop="flipCard()">
      <div class="centerBox">
        <div class="close-btn"
             @click.stop="closeBox">×</div>
        <div class="title">台球器材评级卡</div>
        <div :class="['card-inner', currentCardData?.state ? 'flipped' : '']">
          <div class="card-front">
            <!-- <img src="@/assets/imgs/front.png"
               alt="Card Back"> -->
            <p class="card-front-number">{{ currentCardData?.dataIndex }}号</p>
            <!-- <p class="card-front-number">请翻开卡片</p> -->
          </div>
          <div class="card-back">
            <!-- <img src="./assets/imgs/back.png" alt="Card Front"> -->
            <p class="card-back-number1">
              PH值
              <b>{{ currentCardData?.phValue || 0 }}</b>
            </p>

            <div class="imgBox">
              <img :src="currentCardData?.imageUrl"
                   alt="" />
              <!-- <el-image
                style="width: 100%;"
                :src="currentCardData?.imageUrl"
                fit="contain"
              /> -->
            </div>
            <p class="card-back-number1">---&nbsp;{{ currentCardData?.prizeName }}&nbsp;---</p>
            <p class="card-back-number1">{{ currentCardData?.levelName || '无' }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 二次确认 -->
  <el-dialog v-model="resetDialogVisible"
             title="是否重置奖池"
             width="400"
             align-center>
    <span></span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetDialogVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="resetDialog()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { onBeforeMount, computed, onMounted, ref, watchEffect } from 'vue'

import Simplebar from 'simplebar-vue'
import 'simplebar-vue/dist/simplebar.min.css'

import { getCardData, getRandomArray } from '@/lib/handleDate'
/* 接口 */
import apiHttpFn from '@/api/index'

import webSocket from '@/lib/webSocket.js' // 引入新建的webSocket.js文件
import { json } from 'stream/consumers'

// import SqlData from '@/lib/sqlData'

const tokenData = localStorage.getItem('GIS_USER_LOGIN_IDSTR') || ''

// defineProps<{
//   msg: string
// }>()

const titleName = ref('台球器材评级卡')
const cardName = ref(0)
const isFlipCard = ref(false)
const cardData = ref([]) // 全部卡片
const flipedCardData = ref([]) // 已抽卡片
const remainingCardData = ref([]) // 剩余卡片
const currentFlipedCardData = ref([]) // 当前人员已抽卡片
const currentCardData = ref() // 当前卡片
const scrollList = ref([])
const tapId = ref(1)

const resetDialogVisible = ref(false)

const websocketUrl = `ws://121.41.178.95:10001`

const { sendMessage, messages } = webSocket(websocketUrl, 10000, 5)

const resetPrizes = () => {
  resetDialogVisible.value = true
}
watchEffect(() => {
  if (messages.value) {
    // 打开对话框时，发送消息给服务器
    console.log(messages.value)
    if ('admin' === messages.value?.type) {
      initData()
    }
  }
})

const resetDialog = () => {
  apiHttpFn.resetPrizesStateHttp(tokenData).then((res) => {
    ElMessage({
      message: res.data.message,
      type: 'success',
    })

    if (res.data.message === '重置成功') {
      initData()
      cleanUp()
      resetDialogVisible.value = false
    }
  })
}

const currentFlipedCardDataHP = computed(() => {
  return currentFlipedCardData.value.reduce((pre, cur) => {
    return pre + cur.phValue
  }, 0)
})

const chooseCard = (item) => {
  console.log(item)
  currentCardData.value = item
  cardName.value = Number(item.dataIndex)
}

const onCancel = () => {
  cardName.value = 0
  currentCardData.value = null
}

const onConfirm = () => {
  isFlipCard.value = true
}

const closeBox = () => {
  cardName.value = 0
  isFlipCard.value = false
  currentCardData.value = null
}

const flipCard = () => {
  if (currentCardData.value.state) {
    return
  }
  currentCardData.value.state = 1
  // 接口修改状态
  apiHttpFn
    .updataStateHttp(tokenData, {
      id: currentCardData.value.id,
      state: 1,
    })
    .then((res) => {
      console.log(res)
    })

  // 更新已抽卡片
  flipedCardData.value = cardData.value.filter((item) => {
    return item.state === 1
  })

  remainingCardData.value = cardData.value.filter((item) => {
    return item.state === 0
  })

  currentFlipedCardData.value.push(currentCardData.value)

  const wsData = {
    type: 'front',
    data: currentCardData.value,
  }
  sendMessage(JSON.stringify(wsData))
}
const changeTap = (id) => {
  console.log(id)
  tapId.value = id
  switch (id) {
    case 1:
      break
    case 2:
      break
    case 3:
      break

    default:
      break
  }
}
const cleanUp = () => {
  currentFlipedCardData.value = []
}

const initData = () => {
  apiHttpFn.getCardListHttp(tokenData).then((res) => {
    console.log(res)
    cardData.value = res.data.data || []

    // 更新已抽卡片
    flipedCardData.value = cardData.value.filter((item) => {
      return item.state == 1
    })

    remainingCardData.value = cardData.value.filter((item) => {
      return item.state == 0
    })
    // 顶部滚动数据
    const cengterArr = JSON.parse(JSON.stringify(remainingCardData.value))
    scrollList.value = cengterArr.sort((a, b) => a.id - b.id)

    // remainingCardData.value.filter((item) => {
    //   let rdm=Math.floor(Math.random()*remainingCardData.length)
    //   scrollList.push(scrollList[rdm])
    //   scrollList.splice(rdm,1)
    //   return scrollList
    //   // return item.state == 0
    //   // return cardData.value.sort(() => Math.random());
    // })
    //  setInterval(() => {

    //   }, 3000);
  })
}

onBeforeMount(() => {
  initData()

  // const g = getCardData(1).then((res) => {
  //   console.log(res)
  //   cardData.value = res
  //   remainingCardData.value = cardData.value
  // })
})

onMounted(() => {})
</script>


<style lang="scss" scoped>
.mh-bg {
  background: url('../assets/imgs/bg.png') no-repeat center center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .mh-header {
    height: 8%;
    border-bottom: 0.01rem dashed #9e9d9dd2;
    .mh-title {
      height: 100%;
      font-size: 1.2rem;
      text-align: center;
      color: #000000;
      letter-spacing: 0.05rem;
      font-family: 'YunFengFeiYunTi' !important;
      p {
        height: 50%;
        // line-height: 2;
        &:nth-of-type(2) {
          font-size: 1rem;
          color: #ff0000bf;
        }
        b {
          color: black !important;
          font-size: 1rem;
          font-style: italic;
        }
      }
    }
  }
  .mh-article {
    height: 70%;
    display: grid;
    grid-template-columns: 14% 72% 14%;
    padding: 0.01rem;
    background: rgba(255, 255, 255, 0.082);
    .mh-tap {
      height: 10%;
      box-shadow: 5px 5px 5px 5px rgba(66, 31, 5, 0.521);
      display: flex;
      align-items: center;
      .btnBox {
        width: 100%;
        text-align: center;
        line-height: 100%;
        button {
          border: none;
          cursor: pointer;
          border-radius: 0.08rem;
          padding: 1.2vh 2vw;
          margin: 0 3vw;
          color: #fff;
          font-size: 0.4rem;
          background-color: #000000b8;
          border: 1px solid #000;
          &:hover {
            background-color: #0a6e10d6;
          }
        }
      }
    }
    .center {
      height: 90%;
      .card-container {
        box-sizing: border-box;
        padding: 0.4rem 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        row-gap: 0.3rem;
        column-gap: 0.3rem;
      }
    }
    &-left {
      color: #fff;
      font-size: 0.7rem;
      box-shadow: inset 0px 0px 23px rgba(0, 0, 0, 0.3);
      text-align: center;
      position: relative;
      background: #7a7373ad;
      h1 {
        height: 10%;
        // line-height: 2;
        color: #000000;
        box-shadow: 5px 5px 5px 5px rgba(66, 31, 5, 0.521);
        background: #ff0000bf;
        font-family: 'YunFengFeiYunTi';
      }
      h5 {
        color: #000;
        font-size: 0.6rem;
        word-wrap: break-all;
        text-align: left;
        font-weight: 900;
        line-height: 3.4vh;
        padding: 0.2rem;
      }
      .left-table {
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(100% - 1px);
        background: #384d47bd;
        .title {
          background: #fff;
          font-weight: bold;
          color: #000;
        }
        ul {
          li {
            display: flex;
            justify-content: space-around;
            border: 0.5px solid #fff;
            p {
              &:nth-of-type(2) {
                font-weight: bold;
                color: #000;
              }
            }
            div {
              width: 50%;
              font-size: 0.4rem;
              font-family: 'NSimSun';
              &:nth-of-type(2) {
                border-left: 0.5px solid #ffffff;
              }
            }
          }
        }
      }
    }
    &-right {
      color: #fff;
      font-size: 0.7rem;
      box-shadow: inset 0px 0px 23px rgba(0, 0, 0, 0.3);
      text-align: center;
      h1 {
        box-shadow: 5px 5px 5px 5px rgba(66, 31, 5, 0.521);
        height: 10%;
        // line-height: 2;
        color: #000000;
        background: #ff0000bf;
        font-family: 'YunFengFeiYunTi';
      }
      div {
        height: 90%;
        table {
          background: #384d47bd;
          height: 100%;
          width: 100%;
          border-collapse: collapse;
          color: black;
          border-spacing: 2rem;
          tr {
            border: 1px solid #000;
            th {
              color: #fff;
              font-size: 0.6rem;
              font-weight: 700;
            }
            td {
              font-weight: 500;
              color: #fff;
              font-size: 0.32rem !important;
              border: 1px solid #000;
            }
          }
        }
      }
    }
  }
  .mh-footer {
    height: 15%;
    display: grid;
    grid-template-columns: 14% 72% 14%;
    &-title {
      height: 100%;
      background: #3f598dad;
      color: #000000;
      font-size: 0.3rem;
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      h1 {
        font-family: 'YunFengFeiYunTi';
        margin-bottom: 0.4rem;
      }
      div {
        cursor: pointer;
        padding: 0.2rem 0.6rem;
        border-radius: 0.1rem;
        background: #26617ad4;
        color: white;
        font-weight: 700;
      }
    }
    .mh-footer-box1 {
      height: 100%;
      width: 100%;
      overflow: hidden;
      border-bottom: 1px dashed #fff;
      overflow-x: scroll;
    }
    .mh-footer-box1::-webkit-scrollbar {
      width: 0.2rem;
      height: 0.2rem;
      background-color: transparent;
    }
    .mh-footer-box1::-webkit-scrollbar-thumb {
      width: 0.2rem;
      border-radius: 0.2rem;
      cursor: pointer;
      background-color: rgba(32, 26, 26, 0.815);
    }
    &-container {
      margin-top: 0.2rem;
      justify-content: center;
      display: inline-flex;
      height: 100%;
      .flipped-card {
        user-select: none;
        box-sizing: border-box;
        margin: 0 0.22rem;
        font-size: 0.3rem; /* 调整字体大小 */
        color: white;
        width: 2rem; /* 调整卡片宽度 */
        height: 90%; /* 调整卡片高度 */
        background-color: #3f598d;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        border-radius: 0.2rem;
        background: #3f598d;
        span {
          font-size: 0.35rem; /* 调整字体大小 */
          // margin: 0rem 0;
          font-weight: 500;
        }
      }
    }
    &-ph {
      height: 100%;
      background: #3f598dad;
      color: #fff;
      font-size: 0.4rem;
      text-align: center;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      h1 {
        font-weight: bold;
        font-size: 0.4rem;
        b {
          font-size: 0.6rem;
          color: red;
          font-weight: bold;
          font-family: 'YunFengFeiYunTi';
        }
      }
    }
  }
  .RealyFooter {
    height: 7%;
    width: 100%;
    border-top: 1px dashed #fff;
    background: #110a11bd;
    color: #ff6900;
    font-family: 'YunFengFeiYunTi';
    text-align: center;
    font-weight: 700;
    // line-height: 1.8;
    font-size: 0.7rem;
    letter-spacing: 0.25rem;
  }
}

.card {
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  font-size: 0.8rem;
  color: #fff;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000,
    0 -2px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 3rem;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2rem;
  background-image: url(/src/assets/imgs/33.jpg);
  background-size: 100% 100%;
}

.isFlip {
  filter: grayscale(100);
  pointer-events: none;
}

.mask-box {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #00000086;
  height: 100%;
  width: 100%;
  &-content {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8rem;
    height: 4rem;
    background: #efefef;
    border-radius: 0.2rem;
    box-shadow: -5px 5px 15px rgba(70, 69, 69, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url('@/assets/imgs/box.jpg') no-repeat center;
    background-size: 100% 100%;
    .card-number {
      color: #56ec38;
      font-size: 1rem;
    }
    &-btn {
      margin-top: 0.8rem;
      .btn-confirm,
      .btn-cancel {
        font-size: 0.4rem;
        color: #fff;
        cursor: pointer;
        padding: 0.12rem 0.6rem;
        border-radius: 0.16rem;
      }
      .btn-confirm {
        background: #5c9be4;
      }
      .btn-cancel {
        background: #595a5c;
      }
    }
  }
  .card-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8rem;
    height: 12rem;
    border: 1px solid #8c9296;
    border-radius: 0.2rem;
    overflow: hidden;
    .centerBox {
      width: 100%;
      height: 100%;
      .title {
        height: 1rem;
        font-size: 0.5rem;
        font-weight: bold;
        text-align: center;
        line-height: 1rem;
        background: #3f3131fa;
        color: white;
      }
      .close-btn {
        cursor: pointer;
        position: absolute;
        font-size: 0.6rem;
        z-index: 9;
        padding: 0.2rem;
        color: #fff;
        right: 0.04rem;
        top: 0rem;
      }
      .card-inner {
        width: calc(100% - 0rem);
        height: calc(100% - 1rem);
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
        .card-front,
        .card-back {
          width: 100%;
          height: 100%;
          position: absolute;
          backface-visibility: hidden;
          justify-items: center;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          img {
            max-width: 100%;
            max-height: 100%;
            border-radius: 10px;
          }
        }
        .card-front {
          background: url(/src/assets/imgs/333.jpg) no-repeat center center;
          background-size: 100% 100%;
          p {
            text-align: center;
          }
          &-number {
            margin-top: 4rem;
            font-size: 1.6rem;
            font-weight: 900;
            color: #8b26d0;
          }
        }
        .card-back {
          width: 100%;
          text-align: center;
          background: #811515e6;
          background-size: 100% 100%;
          transform: rotateY(180deg);
          &-number1 {
            font-weight: 700;
            width: 100%;
            color: #fff;
            margin-top: 0.4rem;
            &:nth-of-type(1) {
              text-align: right;
              margin: 0.4rem 0;
              padding-right: 0.5rem;
              b {
                font-weight: 900;
                font-size: 0.4rem;
              }
            }
            &:nth-of-type(2) {
              margin-top: 0.8rem;
              font-size: 0.7rem;
              font-weight: 700;
              font-family: 'NSimSun';
            }
            &:nth-of-type(3) {
              font-size: 0.5rem;
              font-family: 'NSimSun';
            }
          }
          .imgBox {
            margin: 0 auto;
            border-radius: 0.5rem;
            overflow: hidden;
            border: 1px solid #000000;
            width: 85%;
            height: 55%;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
.flipped {
  transform: rotateY(180deg);
}

@media (max-width: 768px) {
  .mh-bg {
    .mh-header {
      .mh-title {
        font-size: 0.8rem;
        p {
          &:nth-of-type(2) {
            font-size: 0.6rem;
          }
          b {
            font-size: 0.8rem;
          }
        }
      }
    }
    .mh-article {
      grid-template-columns: 15% 70% 15%;
      .mh-tap {
        .btnBox {
          button {
            font-size: 0.3rem;
            padding: 0.8vw 3vh;
          }
        }
      }
      &-left,
      &-right {
        font-size: 0.6rem;
        h1 {
          font-size: 0.8rem;
        }
        h5 {
          font-size: 0.5rem;
        }
        .left-table,
        table {
          font-size: 0.4rem;
        }
      }
    }
    .mh-footer {
      grid-template-columns: 15% 70% 15%;
      &-title {
        font-size: 0.3rem;
        h1 {
          font-size: 0.4rem;
        }
      }
      &-container {
        .flipped-card {
          font-size: 0.4rem; /* 调整字体大小 */
          // width: 3rem; /* 调整卡片宽度 */
          // height: 100%; /* 调整卡片高度 */
        }
      }
      &-ph {
        font-size: 0.24rem;
        h1 {
          font-size: 0.36rem;
          b {
            font-size: 0.5rem;
          }
        }
      }
    }
    .RealyFooter {
      font-size: 0.6rem;
    }
    .card {
      font-size: 0.6rem;
      height: 2.4rem;
    }
    .mask-box {
      &-content {
        width: 6rem;
        height: 3rem;
        .card-number {
          font-size: 0.8rem;
        }
        &-btn {
          .btn-confirm,
          .btn-cancel {
            font-size: 0.3rem;
          }
        }
      }
      .card-box {
        width: 6rem;
        height: 9rem;
        .centerBox {
          .title {
            font-size: 0.4rem;
          }
          .close-btn {
            font-size: 0.3rem;
          }
          .card-inner {
            .card-front,
            .card-back {
              p {
                font-size: 1.2rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
